<template>
    <div>
        <el-row class="toolbar" type="flex" align="middle">
            <el-col :span="6">
                <slot name="left">
                    <el-page-header class="back" @back="goBack" :content="$route.meta.title"></el-page-header>
                </slot>
            </el-col>
            <el-col :span="8">
                <slot name="middle"></slot>
            </el-col>
            <el-col class="right" :span="10">
                <slot name="right"></slot>
            </el-col>
        </el-row>
        <div class="toolbar-space"></div>
    </div>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2019/6/27 15:42
   *
   * Toolbar
   **/
  export default {
    name: 'Toolbar',
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      goBack() {
        if (window.history.length <= 1) {
          this.$router.push('/');
        } else {
          this.$router.go(-1);
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .toolbar {
        position fixed
        top 0
        left 0
        width 100%
        height 35px
        background-color rgba(255, 255, 255, .6)
        box-shadow 0 2px 12px 0 rgba(255, 255, 255, .3)
        color #333
        z-index 1000
    }

    .toolbar-space {
        height 35px
    }

    .back {
        margin auto 15px
    }

    .right {
        text-align right
        padding-right 10px
    }
</style>
